<template>
	<view class="trade-item">
		<!-- 商品图片 -->
		<view class="item-image">
			<up-image 
				:src="post.image && post.image.length > 0 ? post.image[0] : defaultImage" 
				width="200rpx" 
				height="200rpx"
				:show-loading="true"
				radius="12rpx"
			/>
			<!-- 状态角标 -->
			<view class="status-badge" v-if="post.tradeStatus !== 'available'">
				<text class="badge-text">{{ getStatusText() }}</text>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="item-info">
			<!-- 标题 -->
			<text class="item-title">{{ post.title }}</text>

			<!-- 标签 -->
			<view class="item-tags">
				<up-tag :text="post.subCategory" plain size="mini" type="warning" />
				<up-tag :text="post.tradeCondition" plain size="mini" type="success" v-if="post.tradeCondition" />
			</view>

			<!-- 底部信息 -->
			<view class="item-footer">
				<!-- 价格 -->
				<view class="price-info">
					<text class="price-symbol">¥</text>
					<text class="price-value">{{ post.tradePrice }}</text>
				</view>

				<!-- 联系按钮 -->
				<up-button 
					type="primary" 
					size="small" 
					@click.stop="handleContact"
					:disabled="post.tradeStatus !== 'available'"
					:color="post.tradeStatus === 'available' ? '#fa8c16' : '#ccc'"
				>
					{{ post.tradeStatus === 'available' ? '联系卖家' : '已售出' }}
				</up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
const props = defineProps({
	post: {
		type: Object,
		required: true
	}
});

const defaultImage = 'https://picsum.photos/400/400?random=default';

// 联系卖家
const handleContact = () => {
	// 检查登录状态
	const token = uni.getStorageSync('token');
	if (!token) {
		uni.showToast({
			title: '请先登录',
			icon: 'none'
		});
		setTimeout(() => {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}, 1000);
		return;
	}

	// 显示联系方式（聊天功能暂未实现）
	uni.showModal({
		title: '联系卖家',
		content: props.post.contactInfo || '暂无联系方式\n\n聊天功能即将上线...',
		showCancel: false,
		confirmText: '好的'
	});
};

const getStatusText = () => {
	const statusMap = {
		'reserved': '已预订',
		'sold': '已售出'
	};
	return statusMap[props.post.tradeStatus] || '';
};
</script>

<style lang="scss" scoped>
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

.trade-item {
	@include card;
	display: flex;
	padding: $spacing-lg;
	margin-bottom: $spacing-base;
	gap: $spacing-lg;
	@include slide-up;

	&:active {
		background: $bg-hover;
		box-shadow: $shadow-md;
	}

	.item-image {
		position: relative;
		flex-shrink: 0;
		border-radius: $radius-md;
		overflow: hidden;
		box-shadow: $shadow-sm;

		.status-badge {
			position: absolute;
			top: 0;
			right: 0;
			background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
			padding: $spacing-xs $spacing-sm;
			border-radius: 0 $radius-md 0 $radius-md;
			backdrop-filter: blur(4px);

			.badge-text {
				font-size: $font-xs;
				color: #fff;
				font-weight: $font-semibold;
			}
		}
	}

	.item-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.item-title {
			font-size: $font-md;
			font-weight: $font-semibold;
			color: $text-primary;
			line-height: $line-height-tight;
			@include ellipsis(2);
			margin-bottom: $spacing-base;
		}

		.item-tags {
			display: flex;
			gap: $spacing-sm;
			flex-wrap: wrap;
			margin-bottom: $spacing-base;
		}

		.item-footer {
			@include flex-between;
			margin-top: $spacing-xs;

			.price-info {
				display: flex;
				align-items: baseline;

				.price-symbol {
					font-size: $font-sm;
					color: $error-color;
					font-weight: $font-bold;
					margin-right: $spacing-xs;
				}

				.price-value {
					font-size: $font-xxl;
					color: $error-color;
					font-weight: $font-bold;
					line-height: 1;
				}
			}
		}
	}
}
</style>

